<script setup lang="ts">
import { MoreFilled } from "@element-plus/icons-vue";

defineOptions({
  name: "Information"
});

const activities = [
  {
    content: "西安测试中心完成资产上报",
    timestamp: "2018-04-12 20:46",
    size: "normal", //"normal,large"
    type: "primary",
    color: "orange"
    // icon: MoreFilled
  },
  {
    content: "西安研发中心完成资产上报",
    timestamp: "2018-04-03 20:46",
    size: "normal",
    type: "primary",
    color: "orange",
    hollow: true
  },
  {
    content: "西安信息中心完成资产上报",
    timestamp: "2018-04-03 20:46",
    size: "normal",
    color: "orange"
  },
  {
    content: "西安财务中心完成资产上报",
    timestamp: "2018-04-03 20:46",
    type: "primary",
    size: "normal",
    color: "orange",
    hollow: true
  },
  {
    content: "西安中心完成资产上报",
    timestamp: "2018-04-03 20:46",
    size: "normal",
    color: "orange"
  }
];
</script>

<template>
  <div class="lawyer-timeline-wrap">
    <el-card class="box-card">
      <div slot="header" class="clearfix rank-header">
        <span>动态信息</span>
      </div>
      <div class="content">
        <el-timeline style="max-width: 600px">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.lawyer-timeline-wrap {
  background: #fff;
  border: 1px solid #ebeaf0;
  border-radius: 4px;

  .rank-header {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #ebeaf0;
    // margin-top: 10px;
  }

  .timeline-header {
    padding: 15px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #ebeaf0;
  }

  .content {
    padding: 5px 15px;
    // color: orange;
  }
}
</style>
